<script setup lang="ts">
import { computed } from 'vue'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
import {useLayoutsStore} from "@/stores/LayoutsState.ts";
import { useRouter } from 'vue-router'

const props = defineProps<{ collapsed: boolean }>()
const emit = defineEmits<{ (e: 'toggle-collapsed'): void }>()

const layoutStore = useLayoutsStore();
const router = useRouter()

const isCollapsed = computed(() => props.collapsed)

function onToggle() {
  emit('toggle-collapsed')
}

function exitAdmin() {
  layoutStore.setLayout('basic')
  router.push('/')
}
</script>

<template>
  <div class="w-full flex items-center justify-between">
    <div class="flex items-center">
      <menu-unfold-outlined
        v-if="isCollapsed"
        class="trigger ml-4"
        @click="onToggle"
      />
      <menu-fold-outlined v-else class="trigger ml-4" @click="onToggle" />
    </div>
    <div class="mr-4">
      <a-button type="primary" @click="exitAdmin">退出管理中心</a-button>
    </div>
  </div>
</template>

<style scoped>

</style>
